<div>
  <mat-toolbar color="primary">
    <button mat-button routerLink="/" routerLinkActive="active">
      <mat-icon color="accent">book</mat-icon>
      <span>Home</span>
    </button>
    <button mat-button routerLink="/blog" routerLinkActive="active">
      <span>Blog</span>
    </button>
    <button mat-button routerLink="/about" routerLinkActive="active">
      <span>About</span>
    </button>
    <span class="spacer"></span>
    <button mat-icon-button [matMenuTriggerFor]="appMenu">
      <mat-icon>more_horiz</mat-icon>
    </button>
    <mat-menu #appMenu="matMenu" xPosition="before" [overlapTrigger]="false">
      <button mat-menu-item routerLink="/login" routerLinkActive="active">
        <mat-icon color="accent">account_circle</mat-icon>
        <span>Login</span>
      </button>
      <button mat-menu-item routerLink="/post/" routerLinkActive="active">
        <mat-icon color="accent">send</mat-icon>
        <span>Post</span>
      </button>
      <button mat-menu-item routerLink="/README.md" routerLinkActive="active">
        <mat-icon color="accent">border_color</mat-icon>
        <span>about</span>
      </button>
      <button mat-menu-item (click)="openDialog()">
        <mat-icon color="accent">info</mat-icon>
        <span>about</span>
      </button>
      <button mat-menu-item>
        <mat-checkbox [(ngModel)]="isDark" (click)="toggleTheme()">DarkMode</mat-checkbox>
      </button>
    </mat-menu>
    <a class="github" href="https://github.com/crazybber">
      <img class="github-logo" alt="logo" height="20" src="assets/icon-e.svg">
    </a>
  </mat-toolbar>
</div>
